<template>
    <el-select :value="value" @input="$emit('input', $event)" class="inspector-select" placeholder="" clearable>
        <el-option v-for="item in references" :key="item.reference" :value="item.reference" :label="item.reference"
            style="width: 50px" />
    </el-select>
</template>

<script>
import { references } from "../../utils/publicName.js"

export default {
    name: "ReferenceSelect",
    props: {
        value: {
            type: String,
            default: ""
        },
    },
    data() {
        return {
            references: references
        };
    },
};
</script>

<style scoped>
/* 完全移除选择框的所有边框和阴影 */
:deep(.inspector-select .el-input__inner) {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    font-family: "仿宋", "FangSong", serif !important;
    font-size: 5mm !important;
    padding: 0 10px !important;
    background-color: transparent !important;
    height: auto !important;
    line-height: normal !important;
}

/* 移除提示语 */
:deep(.el-input__inner::placeholder) {
    color: transparent !important;
}

/* 移除下拉箭头 */
:deep(.el-input__suffix) {
    display: none !important;
}

/* 移除聚焦状态下的边框 */
:deep(.inspector-select .el-input__inner:focus) {
    border: none !important;
    box-shadow: 0 0 0 0 !important;
}

/* 下拉面板样式 */
.inspector-popper {
    border: none !important;
    box-shadow: none !important;
    font-family: "仿宋", "FangSong", serif !important;
    font-size: 5mm !important;
}

/* 下拉选项样式 */
:deep(.inspector-popper .el-select-dropdown__item) {
    font-family: "仿宋", "FangSong", serif !important;
    font-size: 5mm !important;
    height: auto !important;
    padding: 5px 10px !important;
}

/* 选中项样式 */
:deep(.inspector-popper .el-select-dropdown__item.selected) {
    color: #000 !important;
    font-weight: normal !important;
    background-color: #f5f5f5 !important;
}
</style>
